$pink: pink;
$purple: purple;

main {
  flex: 1 1 0%;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;

  .task-list {
    padding: 1rem;

    h2 {
      font-size: 1.5rem;
      font-weight: 300;
      margin-bottom: 1rem;
    }

    .menu {
      display: flex;
      font-size: 1.5em;
      padding: 0 2.85em;
      height: 3em;
      align-items: center;

      .menu__item {
        text-decoration: none;
        flex-grow: 1;
        display: flex;
        position: relative;
        justify-content: center;
        padding: 0.55em 0 0.85em;
        transition: font-size 0.5s;

        &:hover {
          font-size: 1.2em;
        }
      }
    }

    .tasks {
      .task {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem;
        border-bottom: 1px solid #000;

        &:last-child {
          border: none !important;
        }

        input,
        button {
          border: none;
          outline: none;
          background: none;
        }

        .content {
          display: flex;
          align-items: center;
          flex: 1 1 0%;

          .form-check-input {
            width: 25px;
            height: 25px;
          }

          .text {
            margin-left: 5%;
            font-size: 1.125rem;
            width: 100%;
            display: block;
            transition: 0.4s;
          }

          .done {
            text-decoration: line-through;
          }
        }
      }

      .actions {
        display: flex;
        margin: 0 -0.5rem;

        button {
          cursor: pointer;
          margin: 0 0.5rem;
          font-size: 1.125rem;
          font-weight: 700;
          text-transform: uppercase;
          transition: 0.4s;

          &:hover {
            opacity: 0.8;
          }
          &:active {
            opacity: 0.6;
          }
        }
      }

      .edit {
        background-image: linear-gradient(to right, $pink, $purple);
      }
      .delete {
        color: crimson;
      }
    }
  }
}
